<template>
	<div class="cash-admin">
		<div class="cash-admin__header">
			<a-form :model="form" label-align="left">
				<a-form-item field="value1" label="账号" label-col-flex="56px">
					<a-input class="form__input" v-model="form.keyWord" placeholder="手机号/用户名/用户ID" />
				</a-form-item>
				<a-form-item field="value1" label="申请时间" label-col-flex="56px">
					<a-range-picker v-model="form.searchTime" value-format="X"
						:style="{ width: '229px', marginRight: '32px' }" />
				</a-form-item>
				<a-form-item class="no-label">
					<a-button type="primary" :style="{ marginRight: '12px' }" @click="getInvoiceRecords">查询</a-button>
					<a-button @click="resetForm">重置</a-button>
				</a-form-item>
			</a-form>
		</div>
		<a-tabs class="cash-admin__tabs" v-model:active-key="activeKey" @tab-click="tabClick">
			<a-tab-pane :key="0" :title="`未审核${processNumber}`">
				<a-table :columns="processAdminColumns" :data="processAdminData" :pagination="false">
					<template #createTime="{ record }">
						{{ dateFormat(record.createTime) }}
					</template>
					<template #userAccountType="{ record }">
						{{ USER_ACCOUNT_TYPES_FUN(record.userAccountType) }}
					</template>
					<template #amount="{ record }">
						￥{{ (record.amount / 100).toFixed(2) }}
					</template>
					<template #status="{ record }">
						<a-badge v-if="record.status == 2" status="warning" text="未审核" />
						<a-badge v-if="record.status == 3" status="success" text="已通过" />
						<a-badge v-if="record.status == 4" status="danger" text="已拒绝" />
					</template>
					<template #operation="{ record }">
						<a-link @click="lookBill(record.userId)">账单</a-link>
						<b-popconfirm
							title="确定通过？"
							content="通过后无法撤回"
							ok-text="通过"
							@ok="audit(record.id, true)"
						>
							<a-link>通过</a-link>
						</b-popconfirm>
						<b-popconfirm
							title="确定拒绝？"
							content="拒绝后无法撤回"
							ok-status="danger"
							ok-text="拒绝"
							@ok="audit(record.id, false)"
						>
							<a-link status="danger">拒绝</a-link>
						</b-popconfirm>
					</template>
				</a-table>
			</a-tab-pane>
			<a-tab-pane :key="1" :title="`已审核${passNumber}`">
				<a-table :columns="passAdminColumns" :data="passAdminData" :pagination="false">
					<template #createTime="{ record }">
						{{ dateFormat(record.createTime) }}
					</template>
					<template #userAccountType="{ record }">
						{{ USER_ACCOUNT_TYPES_FUN(record.userAccountType) }}
					</template>
					<template #amount="{ record }">
						￥{{ (record.amount / 100).toFixed(2) }}
					</template>
					<template #status="{ record }">
						<a-badge v-if="record.status == 2" status="warning" text="未审核" />
						<a-badge v-if="record.status == 3" status="success" text="已通过" />
						<a-badge v-if="record.status == 4" status="danger" text="已拒绝" />
					</template>
					<template #operation="{ record }">
						<a-link @click="lookBill(record.userId)">账单</a-link>
					</template>
				</a-table>
			</a-tab-pane>
		</a-tabs>
		<div class="cash-admin__pagination">
			<a-pagination :total="total" v-model:current="current" @change="getInvoiceRecords" />
		</div>

		<cash-bill ref="cashBillRef"/>
	</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { errors, capital } from '@/api';
import dateFormat from "ourwill-feutil/common/dateFormat";
import { USER_ACCOUNT_TYPES_FUN } from '@/constant'
import { Message } from '@arco-design/web-vue';
import cashBill from './components/cashBill.vue';

const activeKey = ref<number>(0);
const processNumber = ref(0)
const passNumber = ref(0)
const tabClick = () => {
	getInvoiceRecords();
};

const form: any = ref({
	keyWord: "",
	searchTime: ["", ""],
});

const resetForm = () => {
	form.value = {
		keyWord: "",
		searchTime: ["", ""],
	};
	getInvoiceRecords();
};
// 未审核
const processAdminColumns: any = [
	{
		title: "申请时间",
		slotName: "createTime",
	},
	{
		title: "用户ID",
		dataIndex: "userId",
	},
	{
		title: "用户名",
		dataIndex: "userName",
	},
	{
		title: "手机号",
		dataIndex: "phone",
	},
	{
		title: "提现渠道",
		slotName: "userAccountType",
	},
	{
		title: "提现金额",
		slotName: "amount",
	},
	{
		title: "审核状态",
		slotName: "status",
	},
	{
		title: "操作",
		slotName: "operation",
	},
];
const processAdminData = ref([]);
// 已审核
const passAdminColumns: any = [
	{
		title: "申请时间",
		slotName: "createTime",
	},
	{
		title: "用户ID",
		dataIndex: "userId",
	},
	{
		title: "用户名",
		dataIndex: "userName",
	},
	{
		title: "手机号",
		dataIndex: "phone",
	},
	{
		title: "提现渠道",
		slotName: "userAccountType",
	},
	{
		title: "提现金额",
		slotName: "amount",
	},
	{
		title: "审核状态",
		slotName: "status",
	},
	{
		title: "操作",
		slotName: "operation",
	},
];
const passAdminData = ref([]);

const total = ref<number>(0);
const current = ref<number>(1);
const getInvoiceRecords = async () => {
	if (!form.value.searchTime) {
		form.value.searchTime = ['', ''];
	}
	const params = {
		pageNum: current.value,
		pageSize: 10,
		keyWord: form.value.keyWord,
		startTime: form.value.searchTime[0],
		endTime: form.value.searchTime[1],
		status: activeKey.value,
	};
	const { ok, data } = await capital.fundRecord(params);
	if (!ok) return;
	if (activeKey.value === 0) {
		processAdminData.value = data.data.pageList.records;
	} else {
		passAdminData.value = data.data.pageList.records;
	}
	processNumber.value = data.data.noAudit
	passNumber.value = data.data.haveAudit
	total.value = data.data.pageList.total;
};
getInvoiceRecords()

const audit = async (id: number, isPass: boolean) => {
	try {
		const { ok, data } = await capital.fundRecordAudit(id, isPass)
		if (!ok) {
			return;
		}
		Message.success(data.msg)
		getInvoiceRecords()
	} catch (err) {
		errors(err);
	}
}


const cashBillRef = ref()
const lookBill = (userId: number) => {
	console.log(cashBillRef.value);
	cashBillRef.value.show(userId)
}
</script>
<style lang="less">
.cash-admin {
	min-height: 100%;
	background: #fff;
	box-sizing: border-box;
	padding: 24px 24px 0;
	position: relative;
	padding-bottom: 48px;

	.cash-admin__header {
		.arco-form {
			display: flex;
			flex-direction: row;

			.no-label {
				.arco-form-item-label-col {
					display: none;
				}
			}

			.form__input {
				width: 218px;
				margin-right: 32px;
			}
		}
	}

	.cash-admin__tabs {
		.arco-tabs-tab {
			&:nth-of-type(1) {
				margin-left: 0;
			}
		}
	}

	&__pagination {
		border-top: 1px solid #f1f1f1;
		height: 48px;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		box-sizing: border-box;
		padding: 0 24px;
	}
}</style>